<template>
	<view class="index" :style="css.page" v-if="!isLoading">
		
		<view class="banner p-30">
			<swiper interval="5000" indicator-dots="true" :indicator-color="css.style.pageBgColor" :indicator-active-color="css.style.textPriceColor" duration="500">
				<swiper-item  v-for="(item, keys) in storeInfo.images" :key="keys">
					<view @tap="$xyfun.to('/pages/store')">
						<image :src="$xyfun.image(item)" class="br-20" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="notice flex m-lr-30 m-b-30 p-lr-20 br-20 bc-w">
			<view class="l m-r-10" @tap="$xyfun.to('/pages/notice/list')" :style="css.tcmc">
				<text class="xyicon icon-notice tb ts-36 m-l-10"></text>
			</view>
			<view class="c bl-l m-l-20" :style="css.bl" >
				<swiper autoplay="true" interval="5000" duration="500" :vertical="true">
					<swiper-item v-for="(item, keys) in noticeList" :key="keys" @tap="$xyfun.to('/pages/notice/detail?id='+item.id)" >
						<view class="notice-title m-l-25">{{item.title}}</view>
					</swiper-item>
					<swiper-item v-if="noticeList.length == 0">
						<view class="notice-title m-l-25">暂无公告</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="r m-l-auto" :style="css.tcl" @tap="$xyfun.to('/pages/notice/list')">
				<text class="xyicon icon-right tn" :style="css.tcmc"></text>
			</view>
		</view>
		
		<view class="store-info br-10 m-lr-30 br-20 p-lr-20 p-tb-20" :style="css.mcbg">
			<view class="flex tc-w">
				<view class="tb ts-32">当前场馆</view>
				<view class="m-l-auto ts-26" @tap="$xyfun.to('/pages/store/select')">
					切换场馆<text class="xyicon icon-right"></text>
				</view>
			</view>
			<view class="bc-w br-10 p-lr-20 p-tb-30 m-t-20">
				<view class="top flex lh-36">
					<view class="ts-32 tb">{{storeInfo.name}}</view>
					<view class="m-l-auto ts-26" :style="css.tcp">{{$xyfun.distance(storeInfo.distance)}}</view>
				</view>
				<view class="address ovh m-t-30">
					<text class="xyicon icon-loc m-r-10"></text> {{storeInfo.city + storeInfo.address}}
				</view>
				<view class="time flex m-t-30">
					<view class="h ts-32">营业时间：{{storeInfo.businesshours}}</view>
					<view class="m-l-auto flex" :style="css.tcl">
						<view class="weixin tc m-r-30" @tap="$xyfun.phone(storeInfo.phone)">
							<view class="c" :style="css.mcbg"><text class="xyicon icon-phone tc-w"></text></view>
							<view class="ts-24 h-24 m-t-5">咨询</view>
						</view>
						
						<view class="weixin tc m-r-30" @tap="$xyfun.copy(storeInfo.weixin,'已复制微信号，去添加好友吧')">
							<view class="c" :style="css.mcbg"><text class="xyicon icon-weixin tc-w"></text></view>
							<view class="ts-24 h-24 m-t-5">微信</view>
						</view>
						<view class="weixin tc"  @tap="$xyfun.openLoc(storeInfo.latitude,storeInfo.longitude,storeInfo.name,storeInfo.city+storeInfo.address)">
							<view class="c" :style="css.mcbg"><text class="xyicon icon-daohang tc-w"></text></view>
							<view class="ts-24 h-24 m-t-5">导航</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="action flex m-lr-30 m-t-30 tc tb tc-w ts-38">
			<view class="course" :style="css.mcbg" @tap="$xyfun.to('/pages/coupon/list')">领券</view>
			<view class="store psr ovh" :style="css.mcbg">
				<view class="lk psa" :style="css.pbg"></view>
				<view @tap="$xyfun.to('/pages/store/venue')" >定场</view>
				<view class="rk psa" :style="css.pbg"></view>
			</view>
			<view class="recharge m-l-auto" :style="css.mcbg" @tap="$xyfun.to('/pages/user/level')">等级</view>
		</view>
		
		<view class="recharge-box br-20 p-tb-20 p-lr-20 m-lr-30 m-t-30" :style="css.mcbg">
			<view class="top tc-w flex m-b-20">
				<view class="tb ts-32">充值套餐</view>
				<view class="m-l-auto ts-24" @tap="$xyfun.to('/pages/user/balance/recharge')">更多<text class="xyicon icon-right"></text></view>
			</view>
			<view class="bc-w br-10 p-t-40 p-b-20 flex" v-if="rechargeList.length > 0">
				<view :style="css.pbg" class="item br-10 p-tb-30 tc m-l-20 m-b-20" v-for="(item, keys) in rechargeList" :key="keys" @tap="$xyfun.to('/pages/user/balance/recharge?recharge_id='+item.id)">
					<view class="ts-38 tb" :style="css.tcp">{{item.facevalue}}元</view>
					<view class="m-t-15 ts-26">售价{{item.buyprice}}元</view>
					<view class="tc-w m-t-30 buy" :style="css.mcbg">充值</view>
				</view>
			</view>
		</view>
		
		<xy-tabbar />
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				css:{},
				lat: 0,
				lng: 0,
				isLoading:true,
				storeInfo:{},
				rechargeList:[],
				noticeList:[],
			}
		},
		computed: {
			...mapState(['common'])
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onShareAppMessage() {
			var shareobj = {
				title: this.storeInfo.name,
				path: '/pages/index',
				imageUrl: this.storeInfo.images[0]
			}
			return shareobj;
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.$xyfun.loc().then((res)=>{
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			},()=>{
				this.loadData();
			})
		},
		methods: {
			
			loadData(){
				this.$xyfun.storeId().then((store_id)=>{
					this.$api.get({
						url: '/common/index',
						loadingTip:'加载中...',
						data: {
							store_id:store_id,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.$xyfun.setNavTitle(res.storeInfo.name)
							this.isLoading = false;
							this.storeInfo = res.storeInfo;
							this.storeInfo.distance = this.$xyfun.algorithm([res.storeInfo.latitude,res.storeInfo.longitude],[this.lat,this.lng]);
							this.rechargeList = res.rechargeList;
							this.noticeList = res.noticeList;
						}
					});
				})
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.index{
		padding-bottom: 200rpx;
	}
	
	.notice {
		.l{
			width: 40rpx;
			line-height: 80rpx;
		}
		.c{
			width: 500rpx;
			height: 36rpx;line-height: 36rpx;margin-top: 25rpx;
			swiper{height: 36rpx;line-height: 36rpx;}
			.notice-title{height: 36rpx;line-height: 36rpx;width: 470rpx;text-overflow:ellipsis;white-space:nowrap;overflow: hidden;}
		}
		.r{height: 86rpx;line-height: 86rpx;}
	}
	
	.banner{
		swiper{width: 690rpx;height: 368rpx;}
		image{
			width: 690rpx;height: 368rpx;
		}
	}
	.time{
		.h{line-height: 79rpx;}
		.c{
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 25rpx;
		}
	}
	
	.action{
		.course{height: 160rpx;width: 220rpx;line-height: 160rpx;border-radius: 20rpx 80rpx 80rpx 20rpx;}
		.store{
			.lk{width: 130rpx;height: 130rpx; top: 15rpx;left: -105rpx;border-radius: 65rpx;}
			height: 160rpx;width: 250rpx;line-height: 160rpx;border-radius: 20rpx;
			.rk{width: 130rpx;height: 130rpx; top: 15rpx;right: -105rpx;border-radius: 65rpx;}
		}
		.recharge{height: 160rpx;width: 220rpx;line-height: 160rpx;border-radius: 80rpx 20rpx 20rpx 80rpx;}
	}
	
	.recharge-box{
		.item{width: 295rpx;}
		.buy{height: 54rpx;line-height: 54rpx;border-radius: 27rpx; width: 155rpx;margin-left: 70rpx;}
	}
</style>
